<template>
  <view>
    <!-- 注意navBack() 不要少了小括号 -->
    <!-- @cancel="navBack()"   后退取消事件   在混合文件里面 mixin.js-->
    <!-- @confirm="doSearch()" 搜索事件 -->
    <!-- 小程序的搜索框 -->
    <!-- #ifdef MP -->
    <uni-search-bar ref="searchBar" :focus="focus" radius="100" placeholder="搜索你想要的内容" clearButton="auto" cancelButton="always" @cancel="navBack(1)" @confirm="doSearch"></uni-search-bar>
    <!-- #endif -->

    <!-- 搜索框 H5和APP-->
    <keyword @doSearch="doSearch" v-if="!searched"></keyword>

    <!-- 标签导航 课程 searched状态值AAA -->
    <tab-bar v-if="searched" v-model="tabIndex"></tab-bar>

    <!-- 下拉筛选  综合排序 searched是一个布尔状态  搜索过了才会显示  没有搜索不显示 -->
    <!-- <downbar v-if="searched"  :params="params"></downbar> -->

    <!-- block是uniapp 空标签 包含某一部分    标签体内容-->
    <!-- block渲染出来没有这个标签元素 -->
    <block v-if="searched">
      <!-- 如果每个子组件布局不一样, 可拆开写 (注意ref只能为 "mescrollItem下标" 的格式, 另外 :i="下标" :index="tabIndex"也是固定写法) : -->
      <course-list ref="mescrollItem0" :i="0" :index="tabIndex" :params="params" :content="content"></course-list>
      <article-list ref="mescrollItem1" :i="1" :index="tabIndex" :params="params" :content="content"> </article-list>
      <question-list ref="mescrollItem2" :i="2" :index="tabIndex" :params="params" :content="content"></question-list>
    </block>

  </view>
</template>

<script>
//当前页面实例
let currentWebview = null
import keyword from './components/keyword.vue'
import tabBar from '@/components/common/tab-bar.vue'
// import downbar from  './components/down-bar.vue'

//课程
import courseList from './components/course-list.vue'
//文章
import articleList from './components/article-list.vue'
//问答
import questionList from './components/question-list.vue'
// mescroll混合文件
import MescrollMoreMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more.js";
export default {
  mixins: [MescrollMoreMixin], // 多个mescroll-body写在子组件时, 则使用mescroll-more.js补充子组件的页面生命周期
  components: {
    keyword,
    tabBar,
    // downbar,
    courseList,
    articleList,
    questionList
  },
  data () {
    return {
      params: null, //其他页面带的参数
      content: null, //搜索内容
      focus: false, //小程序 搜索框焦点status
      searched: false, //是否搜索过， 将对应的key隐藏
      tabIndex: 0, //子组件的双向绑定  当前所在标签下表
    }
  },
  onLoad (option) { // 通过option接收其他页面传递的参数
    // #ifdef APP-PLUS
    currentWebview = this.$scope.$getAppWebview();
    // #endif

    // 如果有参数，不自动获取焦点；没有参数，自动获取焦点
    if (option.params) {
      // 解析参数，传递给属性
      // console.log('option', JSON.parse(option.params))
      this.params = JSON.parse(option.params)
      //开始搜索
      this.doSearch()
    } else {
      // 获取焦点
      // #ifdef APP-PLUS
      currentWebview.setTitleNViewSearchInputFocus(true)
      // #endif

      // #ifdef MP
      // 小程序端获取焦点
      this.focus = true
      // #endif
    }


  },
  // 监听原生标题栏搜索输入框输入内容变化事件
  onNavigationBarSearchInputChanged (e) {
    // console.log('搜索框你输入的内容', e.text)
    this.content = e.text
  },
  // 用户点击软键盘上的“搜索”按钮时触发。
  onNavigationBarSearchInputConfirmed (e) {
    // console.log('点击了搜索按钮', e.text)
    // 失去焦点  收起键盘

    //#ifdef APP-PLUS
    currentWebview.setTitleNViewSearchInputFocus(false)
    // #endif

    this.doSearch()
  },


  // 取消按钮  点击事件
  onNavigationBarButtonTap (e) {
    // 单个按钮就默认为e.index ===0
    //后退全局的混合文件  
    //后退 不需要判断index， 因为 只有按钮   如果有多个按钮再进行判断
    this.navBack()
  },

  methods: {
    doSearch (obj) {
      // console.log('obj', this.content) //事件传递参数
      // obj &&  obj.value  是否是下程序传递的搜索关键字  
      this.content = obj && obj.value ? obj.value : this.content

      //1、要绑定他的数据  searchBar 就是他的id 然后在他子组件中拿到data的属性 进行更改

      // // #ifdef MP
      this.$refs.searchBar.searchVal = this.content
      // //#endif
      //2、方法就是用传递的方式去给他传递数据 

      // 搜索过, 隐藏关键字 keyword.vue 组件
      //	状态是否为真或者false 进行一个隐藏元素 
      this.searched = true

      //将当前搜索关键字保存到本地缓存
      this.storageHistory()

      this.$nextTick(() => {  //箭头函数 
        // mescrollItem0 || $refs[`mescrollItem${this.tabIndex}`]  写法 他的下标动态变化
        //节流处理 以防太快请求多次  (节流全局工具注册)
        this.$util.throttle(() => {
          //触发当前标签页的列表子组件的search开始查询
          this.$refs[`mescrollItem${this.tabIndex}`].search()
        })  //加载时长 , 100
      })
      // uni.showLoading() //刷新的圈圈
    },

    //将当前搜索关键字保存到本地缓存  （注意方法）
    storageHistory () {
      //把搜索的内容保存到本地  
      const key = 'history_list'
      //获取当前本地已经存在的记录
      uni.getStorage({
        key: key,
        success: (res) => { //注意使用箭头函数  不然用不了this
          // console.log('源历史关键字', res.data)
          //查询到的原理论关键字数组  判断数组中是否存在当前关键字
          //不存在则添加到数组的第一个元素 存在不添加
          // (注意: 这里有判断条件 三个条件满足且 往下走程序 )
          // 1.this.content  是否为  true  
          // 2.res.data.indexOf(this.content)  是否有历史搜索过？ 如果没有 等于 -1 < 0 
          // 3.res.data.unshift(this.content)  没有历史搜索过？ unshift()可以将参数添加到数组的第一位；
          this.content && res.data.indexOf(this.content) < 0 && res.data.unshift(this.content)

          // 保存到本地缓存中
          uni.setStorageSync(key, res.data)
        },
        fail: (error) => {
          // console.log('获取失败',error)
          //如果之前没有保存过key 则会走失败  即第一次保存。  注意不要少了[]
          this.content && uni.setStorageSync(key, [this.content])
        }
      })
    }
  }
}
</script>

<style>
</style>
